
<h1>Directive components in <code>ngMessages</code></h1>



<div class="component-breakdown">
  <div>
    <table class="definition-table">
      <tr>
        <th>Name</th>
        <th>Description</th>
      </tr>
      
      <tr>
        <td><a href="api/ngMessages/directive/ngMessages">ngMessages</a></td>
        <td><p><code>ngMessages</code> is a directive that is designed to show and hide messages based on the state
of a key/value object that it listens on. The directive itself complements error message
reporting with the <code>ngModel</code> $error object (which stores a key/value state of validation errors).</p>
</td>
      </tr>
      
      <tr>
        <td><a href="api/ngMessages/directive/ngMessagesInclude">ngMessagesInclude</a></td>
        <td><p><code>ngMessagesInclude</code> is a directive with the purpose to import existing ngMessage template
code from a remote template and place the downloaded template code into the exact spot
that the ngMessagesInclude directive is placed within the ngMessages container. This allows
for a series of pre-defined messages to be reused and also allows for the developer to
determine what messages are overridden due to the placement of the ngMessagesInclude directive.</p>
</td>
      </tr>
      
      <tr>
        <td><a href="api/ngMessages/directive/ngMessage">ngMessage</a></td>
        <td><p><code>ngMessage</code> is a directive with the purpose to show and hide a particular message.
For <code>ngMessage</code> to operate, a parent <code>ngMessages</code> directive on a parent DOM element
must be situated since it determines which messages are visible based on the state
of the provided key/value map that <code>ngMessages</code> listens on.</p>
</td>
      </tr>
      
      <tr>
        <td><a href="api/ngMessages/directive/ngMessageExp">ngMessageExp</a></td>
        <td><p><code>ngMessageExp</code> is a directive with the purpose to show and hide a particular message.
For <code>ngMessageExp</code> to operate, a parent <code>ngMessages</code> directive on a parent DOM element
must be situated since it determines which messages are visible based on the state
of the provided key/value map that <code>ngMessages</code> listens on.</p>
</td>
      </tr>
      
    </table>
  </div>
</div>

